<template>
  <div class="padding-box-100">
    <div :class="cls" @click="handleClick" ref="refBox"></div>
  </div>
</template>

<script lang="ts">
import {ref, defineComponent, reactive, nextTick} from 'vue'

export default defineComponent({
  setup() {
    const count = ref(0);
    const cls = reactive(['easy-FLIP-test'])
    const refBox = ref(null)

    function handleClick() {
      // 获取设置值前的状态
      const {
        width: startWidth,
        height: startHeight,
        top: startTop,
        left: startLeft,
      } = refBox.value.getBoundingClientRect()
      console.log(startLeft, startTop)

      if (cls.includes('easy-FLIP-test-end')) {
        cls.splice(1, 1)
      } else {
        cls.push('easy-FLIP-test-end')
      }

      nextTick(() => {
        const {
          width: endWidth,
          height: endHeight,
          top: endTop,
          left: endLeft,
        } = refBox.value.getBoundingClientRect()
        console.log(endLeft, endTop)
        console.dir(refBox.value)
        const keyframes = [
          {
            width: `${startWidth}px`,
            height: `${startHeight}px`,
            transform: `translate(${startLeft - endLeft}px,${startTop - endTop}px)`,
          },
          {
            width: `${endWidth}px`,
            height: `${endHeight}px`,
            transform: `translate(0,0)`,
          }
        ]
        const option = {
          duration: 300,
          iterations: 1
        }
        refBox.value.animate(keyframes, option)
      })

    }

    return {
      count,
      cls,
      refBox,
      handleClick,
    }
  }
})
</script>

<style scoped>
.easy-FLIP-test {
  background-color: #42b983;
  width: 10vw;
  height: 10vw;
}

.easy-FLIP-test-end {
  width: 5vh;
  height: 5vh;
  margin: 328px 0 0 320px;
}
</style>
